<template>
    <div class="page-register-step">
        <van-form @submit="store.twoSubmit">
            <van-cell-group inset>
                <van-field v-model="code" maxlength="5" placeholder="请输入验证码"
                    :rules="[{ required: true, message: '请填写验证码' }]">

                    <template #button>
                        <van-button size="small" type="primary" :disabled="codeCountDown !==0" @click="store.sendMsg()">{{ codeCountDown=== 0 ? '发送验证码' : `${codeCountDown}`}}</van-button>
                    </template>
                </van-field>
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button :disabled="codeButtonIsDisabled" round block type="primary" native-type="submit">
                    下一步
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { useRegisterStore } from '@/stores/register';

const store = useRegisterStore()
const { code, codeCountDown ,codeButtonIsDisabled } = storeToRefs(store)
</script>